<script setup>
import { computed, ref } from "vue";
import {matchType} from '@/utils/files'
import PdfIcon from "./icons/PdfIcon.vue";
import WordIcon from "./icons/WordIcon.vue";
import TxtIcon from "./icons/TxtIcon.vue";
import ExcelIcon from "./icons/ExcelIcon.vue";
import ZipIcon from "./icons/ZipIcon.vue";
import ImageIcon from "./icons/ImageIcon.vue";
import VideoIcon from "./icons/VideoIcon.vue";
import RadioIcon from "./icons/RadioIcon.vue";
import { useLoginStore } from "@/stores/login";


const props = defineProps({
  file: {
    type: Object,
    default: () => {
      return {
        name: "",
        url: "",
      };
    },
  },
});
const file = computed(() => props.file)
const fileType = computed(() => {
  return matchType(file.value.name)
})
const fileExtensionName = computed(() => {
  try {
    return file.value.name.split('.')[file.value.name.split('.').length - 1];
  }
  catch (e) {
    return ''
  }
})
const icons = {
  pdf: PdfIcon,
  word: WordIcon,
  other: TxtIcon,
  txt: TxtIcon,
  excel: ExcelIcon,
  radio: RadioIcon,
  video: VideoIcon,
  image: ImageIcon,
  zip: ZipIcon,
}
const showname = computed(()=>{
  //得出没有扩展名的文件名
  let name = file.value.name.slice(0,file.value.name.length-fileType.value.length-1);
  console.log('name',name)
  let res=file.value.name
  if (name.length + fileExtensionName.value.length > 8) {
    res = name.slice(0, 8 - fileExtensionName.value.length) + '... .' + fileExtensionName.value
  }
  return res
})
const loginStore =useLoginStore()
const download =()=>{
  const link = document.createElement("a")
  const url = `/api/download?url=${file.value.url}`
  document.cookie = `token=${loginStore.token}; path=/; max-age=15; `
  link.setAttribute("href", url)
  link.setAttribute("target","_blank" )
  document.body.appendChild(link)
  // 模拟手动点击a标签下载文件
  link.click();
  setTimeout(() => {
    // 删除DOM节点
    document.body.removeChild(link)
  }, 1000);
} 
</script>
<template>
  <div class="box" @click="download">
    <el-icon class="icon">
      <component :is="icons[fileType]"></component>
    </el-icon>
    <div class="name">{{ showname }}</div>

  </div>
</template>


<style lang="scss" scoped>
.box{
  border-radius: 0.4rem;
    border: 1px solid #EBEEF5;
    background: #F5F7FA;
  display: flex;
  align-items: center;
  height: 3rem;
  min-width: 10rem;
  max-width: 13rem;
  padding: 0.5rem;
  // icon fontsize
  font-size: 2.0rem;
  cursor: pointer;
  &:hover{
    // background: darken(#F2F3F5, 1.5) ;
    box-shadow: 0px 1px 0.8rem 0px rgba(83, 85, 155, 0.18);
    // transform: translateY(0.02rem);
  }
}

.name{
  font-size: 1.2rem;
  font-weight: normal;
  display: flex;
  align-items: center;
  color: #3D3D3D;
  // max-width: 200px;
  // /* 设置容器宽度 */
  // overflow: hidden;
  // /* 隐藏溢出的文本 */
  // white-space: nowrap;
  // /* 防止文本换行 */
  // text-overflow: ellipsis;
  /* 溢出部分用省略号表示 */
  
}
.icon{
  // margin:0 0.5rem;
  transform: none !important;
  font-size:  2.4rem;
}
</style>